<template>
    <div>
        <section>
            <h2>
                <span>G</span>
                <span>h</span>
                <span>o</span>
                <span>s</span>
                <span>t&nbsp;&nbsp;</span>
                <span>T</span>
                <span>e</span>
                <span>x</span>
                <span>t</span>
            </h2>
        </section>
    </div>
</template>


<style scoped>
    section{
        position: relative;
        width: 100%;
        height: 100vh;
        background: #111;
        display: flex;
        justify-content:center;
        align-items: center;
    }
    h2{
        font-size: 10em;
        color: #ffffff;
        text-transform: uppercase;
        text-align: center;
        display: flex;
    }
    h2 span{
        transition: 1.5s;
    }
    h2:hover span{
        filter: blur(20px);
        opacity: 0;
        transform: scale(2);
    }
    h2 span:nth-child(10n+1){
        transition-delay: 0s;
    }
    h2 span:nth-child(10n+2){
        transition-delay: 0.1s;
    }
    h2 span:nth-child(10n+3){
        transition-delay: 0.2s;
    }
    h2 span:nth-child(10n+4){
        transition-delay: 0.3s;
    }
    h2 span:nth-child(10n+5){
        transition-delay: 0.4s;
    }
    h2 span:nth-child(10n+6){
        transition-delay: 0.5s;
    }
    h2 span:nth-child(10n+7){
        transition-delay: 0.6s;
    }
    h2 span:nth-child(10n+8){
        transition-delay: 0.7s;
    }
    h2 span:nth-child(10n+9){
        transition-delay: 0.8s;
    }
    h2 span:nth-child(10n+9){
        transition-delay: 0.9s;
    }
</style>